<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<%@ include file="/WEB-INF/views/include/easyui.jsp"%>
<script src="${ctx}/static/plugins/echarts/echarts.js"
	type="text/javascript"></script>
</head>

<body class="easyui-layout" style="font-family: '微软雅黑'">
	<div data-options="region:'north',split:false,border:true"
		style="overflow: hidden;">
		<div id="tb" style="padding: 5px; height: auto">
			<div>
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-standard-page-go" plain="true" onclick="exportData()">数据导出</a>
			</div>
		</div>
	</div>
	<div id="cityList" data-options="region:'west',split:true,border:false,title:'统计表'" style="width: 500px;">
		<table id="sdg"></table>
	</div>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="cityHistogram" data-options="region:'center',split:false,border:true,title:'统计图'" style="overflow: scroll"></div>

	<iframe id="fileDownFrame" src="" style="display:none; visibility:hidden;"></iframe> 
<script type="text/javascript">
//设置统计表和统计图的布局占比：
var height;//设置统计图的占比空间高度

$(function(){  	
	height = $("body").innerHeight();
	/**1、以列表形式展示城市统计数据 begin **/
	var ecity=$('#sdg').datagrid({    
		method: "get",
	    url:'${ctx}/userCityReport/list_Data', 
	    fit : true,
		fitColumns : true,
		border : false,
		striped:true,
		idField : 'id',
		pagination:false,
		rownumbers:true,
		pageNumber:1,
		pageSize : 10,
		singleSelect:true,
	    columns:[[    			
			{field:'city',title:'城市',align:'center',width:240,sortable:false,rowspan:2},
	        {field:'total',title:'用户数量',align:'center',width:240,sortable:false,rowspan:2}
	    ]],
	    enableHeaderClickMenu: false,
	    enableHeaderContextMenu: false,
	    enableRowContextMenu: false
	});/**1、以列表形式展示城市统计数据 end  **/
	
	//绘制统计图，展示各大城市用户使用数据
	DrawChartData();
});

//定义方法，展示各大城市用户使用数据
function DrawChartData() {  
	var myChart;
	var elementHeight = 40;
	// 加载柱状图的配置文件
	require.config({
		paths: {
			echarts: '${ctx}/static/plugins/echarts'
		}
	});	 
	//通过发送Ajax回调函数请求获取java后台数据  
	$.ajax({  
		type : "post",  
		async : false, //同步执行  
		url : "${ctx}/userCityReport/line_Data",  
		data : {},  
		dataType : "json", //返回数据形式为json  
		success : function(result) {  
			 //设置统计图高度
			 if(height < result.series[0].data.length * elementHeight){
			    	$("#cityHistogram").height(result.series[0].data.length * elementHeight);
			 }
			require(
		    	[
					'echarts',
				    'echarts/chart/bar' //使用柱状图就加载bar模块
				],	  
		        function (eCharts) {
		            // 基于准备好的dom，初始化echarts图表
		            myChart = eCharts.init(document.getElementById('cityHistogram')); 	
		            var option = {
		                title : {
		                    text: '各城市用户使用情况统计（人）',
		                    x: 'center' //标题居中显示
		                },
		                tooltip: {
		                    show: true,
		                    trigger: 'axis'  
		                },
		                xAxis : [
		                    {
		                        type : 'value',
		                    }
		                ],
		                yAxis : [
		                    {
		                    	name : '城市',
		                        type : 'category',
		                        data : result.category
		                    }
		                ],
		                series : [
		                    { 
		                    	name : '用户数',
		                        type : "bar",
		                        data : result.series[0].data
		                    }
		                ]
		
		              };
		              // 为echarts对象加载数据 
		              myChart.setOption(option); 
		              if(height < result.series[0].data.length * elementHeight){
		            	  $("#cityHistogram").css({"overflow":"auto"});
		                  $("#cityHistogram").height(height-30);
		              }
		          }   
			);
		},  
		error : function(errorMsg) {  
			alert("图表请求数据失败啦!");  
			myChart.hideLoading();  
		}  
	});  
}  
//导出数据
function exportData(){
  	$("#fileDownFrame").attr("src", "${ctx}/userCityReport/export");
}

</script>
</body>
</html>